<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function appendDataToElByFragment(option) {
        var targetEl = option.target || document.body,
          createEl,
          data = option.data || [];
        // 让容器脱离文档流，减少重绘重排
        var targetEl_display = targetEl.style.display;
        targetEl.style.display = "none";

        // *****创建文档片段来优化Dom操作****
        var fragment = document.createDocumentFragment();
        // 给元素填充数据
        for (var i = 0, max = data.length; i < max; i++) {
          createEl = document.createElement(option.createEl);
          for (var item in data[i]) {
            if (item.toString() === "text") {
              createEl.appendChild(document.createTextNode(data[i][item]));
              continue;
            }
            if (item.toString() === "html") {
              (createEl.innerHTML = item), data[i][item];
              continue;
            }
            createEl.setAttribute(item, data[i][item]);
          }
          // ****将填充好的node插入文档片段****
          fragment.appendChild(createEl);
        }
        // ****将文档片段统一插入目标容器****
        targetEl.appendChild(fragment);
        // 显示容器，完成数据填充
        targetEl.style.display = targetEl_display;
      }
      function appendDataToElNoFragment(option) {
        var targetEl = option.target || document.body,
          createEl,
          data = option.data || [];
        // 让容器脱离文档流，减少重绘重排
        // var targetEl_display = targetEl.style.display;
        // targetEl.style.display = "none";

        // 给元素填充数据
        for (var i = 0, max = data.length; i < max; i++) {
          createEl = document.createElement(option.createEl);
          for (var item in data[i]) {
            if (item.toString() === "text") {
              createEl.appendChild(document.createTextNode(data[i][item]));
              continue;
            }
            if (item.toString() === "html") {
              (createEl.innerHTML = item), data[i][item];
              continue;
            }
            createEl.setAttribute(item, data[i][item]);
          }
          // ****将填充好的node插入文档片段****
          targetEl.appendChild(createEl);
        }
        // ****将文档片段统一插入目标容器****
        // 显示容器，完成数据填充
        // targetEl.style.display = targetEl_display;
      }


      // 使用
      var wrap = document.querySelectorAll(".wrap")[0];

      var data = [];
      for (let index = 0; index < 10000; index++) {
        data.push({ name: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", text: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", title: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" });
      }

      console.time()
      appendDataToElNoFragment({
        target: wrap,
        createEl: "div",
        data: data,
      });
      console.timeEnd()
    </script>
  </body>
</html>
